<template>
	<view class="container">
		<view class="banner">
			<view class="member-number">
				<view class="">No.{{ userInfo.number }}</view>
				<view class="">明细</view>
			</view>
			<view style="margin-top: 10rpx">账户余额</view>
			<!-- <view class="member-price">￥{{userInfo.balance.toFixed(2)}}</view> -->
			<view class="member-bottom">
				<view class="member-price">￥{{ userInfo.balance.toFixed(2) }}</view>
				<view style="font-size: 24rpx">
					<view>充值本金￥{{ userInfo.rechargeBalance }}</view>
					<view>商家赠送￥{{ userInfo.giftBalance }}</view>
				</view>
			</view>
		</view>

		<!-- 显示 -->
		<view class="content" :style="{ height: systemInfo.hostName === 'alipay' ? '900rpx' : 'calc(100% - 290rpx)' }">
			<u-tabs :list="tabList" :activeStyle="{ color: '#f1be5d' }" lineColor="#f1be5d" :current="type" @click="onCheckType"></u-tabs>

			<scroll-view v-if="recordList.length > 0" scroll-y style="height: 90%; padding: 20rpx">
				<view class="record-info" v-for="item in recordList" :key="item.id">
					<view class="left">
						<!-- <view class="trade-type">{{item.paymentTypeName}}</view> -->
						<view class="trade-type"><u-icon name="order" size="18px" :label="item.paymentTypeName"></u-icon></view>
						<view class="time">{{ item.createTime }}</view>
					</view>

					<view class="right">
						<!-- <view class="trade-type"></view> -->
						<view class="gift-amount" v-if="item.type === 3">赠送金额￥{{ item.giftAmount }}</view>
						<view class="amount">
							<text style="font-size: 24rpx">{{ item.typeName }}</text>
							{{ item.type === 1 ? '-' : '+' }}{{ item.money }}
						</view>
					</view>
				</view>
			</scroll-view>

			<view class="none" v-else>
				<image src="../../../static/images/order/default_img_order.png" style="height: 300rpx; height: 400rpx"></image>
				<view style="text-align: center; font-size: 30rpx">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
import common from '@/common/util.js';
export default {
	data() {
		return {
			systemInfo: common.getSystemInfo(),
			type: 0,
			recordList: [],
			userInfo: {
				balance: 0
			},
			tabList: [
				{
					name: '全部',
					value: 0
				},
				{
					name: '消费',
					value: 1
				},
				{
					name: '退款',
					value: 2
				},
				{
					name: '充值',
					value: 3
				}
			] // 0,1,2,3
		};
	},
	onLoad() {
		this.getRecordList();
	},
	onShow() {},
	onReady() {
		// #ifdef MP-ALIPAY
		uni.hideHomeButton();
		uni.setNavigationBarColor({
			frontColor: '#000000', // 设置文本颜色
			backgroundColor: '#ffffff' // 设置背景颜色
		});
		// #endif
	},
	methods: {
		async getRecordList() {
			const res = await this.$api.getRecordList({
				type: this.type
			});
			this.userInfo = res.otherData;
			this.recordList = res.data || [];
			// console.log(res);
		},
		// 选中type
		onCheckType({ index }) {
			if (this.type === index) return;
			this.type = index;
			// console.log(this.type);
			this.getRecordList();
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx;

	.banner {
		padding: 30rpx;
		margin-top: 30rpx;
		background-color: #383838;
		height: 260rpx;
		border-radius: 10rpx;
		box-shadow: 5rpx 5rpx 5rpx #8c8c8c;
		color: #e5cd9b;

		.member-number {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.member-bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;
			.member-price {
				font-size: 50rpx;
			}
		}
		// .member-price {
		// 	margin-top: 30rpx;
		// 	font-size: 50rpx;
		// }
	}

	.content {
		display: flex;
		flex-direction: column;
		// height: calc(100% - 290rpx);
		padding-top: 20rpx;
		background-color: #fff;
		.record-info {
			// 每一项数据
			padding: 0 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 150rpx;
			border: 1px solid #ededed;
			margin-top: 10rpx;
			.time {
				margin-top: 5rpx;
				color: #c9c9c9;
				font-size: 25rpx;
			}
			.trade-type {
				font-size: 32rpx;
			}
			.right {
				text-align: right;
				.gift-amount {
					color: #c12d2b;
					font-size: 25rpx;
				}
				.amount {
					font-size: 35rpx;
				}
			}
		}
		.none {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
}
</style>
